<template>
  <div class="user1-add-box f-g" style="margin-top: 43px">
    <div class="f-r">
      <div>
        <TitleBox title="项目专属码" />
        <div class="code" style="margin-right: 40px">
          <vue-qr
            v-if="codeUrl"
            :text="codeUrl"
            :size="236"
            :logo-scale="0.2"
          />
        </div>
      </div>
      <div>
        <TitleBox title="项目标签" />
        <div class="tag-list f-c" style="margin-top: 20px">
          <div v-for="(list,listIndex) in tagList" :key="listIndex">
            <div v-for="item in list" :key="item.id" class="tag active" style="margin-bottom: 20px">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <TitleBox title="基本信息" style="margin: 40px 0" />
    <div class="c-table">
      <table>
        <tr v-for="(row,rowIndex) in tableList" :key="rowIndex">
          <template v-for="(col,colIndex) in row">
            <td v-if="col.type === 'label'" :key="colIndex" :colspan="col.colspan" class="bg-td" style="width: 250px">
              {{ col.name }}
            </td>
            <td v-else-if="col.type === 'title'" :key="colIndex" :colspan="col.colspan">
              {{ col.name }}
            </td>
            <td v-else :key="colIndex" :colspan="col.colspan">{{ currentDetail[col.name] }}</td>
          </template>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import VueQr from 'vue-qr' // vue2.0
import { http_project2 } from '@/api'
const getRowList2 = (name1, name2, name3, name4) => {
  return [
    { type: 'label', name: name1, colspan: 1 },
    { type: 'value', name: name2, colspan: 1 },
    { type: 'label', name: name3, colspan: 1 },
    { type: 'value', name: name4, colspan: 1 }
  ]
}
const getRowList1 = (name1, name2) => {
  return [
    { type: 'label', name: name1, colspan: 1 },
    { type: 'value', name: name2, colspan: 3 }
  ]
}
export default {
  name: 'Page1',
  components: {
    VueQr
  },
  props: {
    currentDetail: Object
  },
  data() {
    return {
      tagList: [],
      tableList: [
        getRowList2('项目编号', 'projectCode', '赋码时间', 'applyDate'),
        getRowList2('项目名称', 'projectName', '项目属性', 'projetAttribute'),
        getRowList2('业主联系人', 'handleLeader', '业主联系手机', 'legalPhone'),
        getRowList2('业主联系电话', 'handlePhone', '项目总投资（万元）', 'totalAmount'),
        getRowList1('项目所在区域', 'dscAdmRegion'),
        getRowList2('拟开工时间', 'startYear', '拟建成时间', 'endYear'),
        getRowList2('建设地点区划代码', 'placeCode', '国标行业名称', 'industryName'),
        getRowList1('建设地点详情', 'placeCodeDetail'),
        getRowList1('建设规模及内容', 'scaleContent'),
        getRowList2('总用地面积', 'totalLandArea', '总建筑面积', 'totalLandMetre'),
        getRowList1('项目单位名称', 'enterpriseName'),
        getRowList2('证照类型', 'certificatesType', '证照编号', 'certificatesCode'),
        getRowList2('项目负责人', 'projectLeader', '负责人电话', 'projectPhone'),
      ],
      codeUrl: ''
    }
  },
  mounted() {
    this.codeUrl = baseUrl + '/#/project-process-detail?type=1&projectId=' + this.currentDetail.id
    http_project2.relTagList({ id: this.currentDetail.id }).then(res2 => {
      while (res2.data.length) {
        this.tagList = [
          ...this.tagList,
          res2.data.splice(0, 4)
        ]
      }
    })
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
.tag-list {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  .tag {
    margin-bottom: 10px;
    padding: 0 28px;
    height: 38px;
    opacity: 1;
    border: 1px solid #999999;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    color: #999999;
    margin-right: 30px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
  }
  .tag.active {
    background-color: #DEE8FF;
    color: #4880FF;
    border-color: #4880FF;
  }
}
</style>
